<template>
  <div class="custom-tree-container">
    <el-tree
      style="max-width: 100%; padding: 50px; margin: auto"
      :data="treeData"
      :highlight-current="true"
      :default-expand-all="true"
    >
      <template #default="{ data }">
        <span class="custom-tree-node">
          <span>{{ data.name }}</span>
          <div
            style="width: 150px; display: flex; justify-content: space-between"
          >
            <span>管理员</span>
            <el-dropdown>
              <span class="el-dropdown-link">
                操作
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="centerDialogVisible = true;form.pid = data.id"
                    >添加子部门</el-dropdown-item
                  >
                  <el-dropdown-item>编辑部门</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </span>
      </template>
    </el-tree>
    <!-- 弹框 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="添加页面"
      width="500"
      align-center
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="部门名称">
          <el-input v-model="form.name" placeholder="2-10个字符" />
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="form.code" placeholder="2-10个字符" />
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-select
            v-model="form.managerId"
            placeholder="请选择负责人"
            clearable
          >
            <el-option
              v-for="item in managerList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍">
          <el-input
            v-model="form.introduce"
            type="textarea"
            placeholder="1-100个字符"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import instance from '@/http/api'
import { ArrowDown } from '@element-plus/icons-vue'
const originalData = ref([])
const treeData = ref([])

const convertToTreeData = (data: any[]) => {
  const dataMap = new Map()
  const rootNodes: any[] = []
  data.forEach((item: { id: any }) => {
    dataMap.set(item.id, { ...item, children: [] })
  })
  data.forEach((item) => {
    if (item.pid !== 0) {
      const parent = dataMap.get(item.pid)
      if (parent) {
        parent.children.push(dataMap.get(item.id))
      }
    } else {
      rootNodes.push(dataMap.get(item.id))
    }
  })
  return rootNodes
}
// 渲染数据
const getData = async () => {
  try {
    const res = await instance.get('/company/department')
    originalData.value = res.data
    treeData.value = convertToTreeData(res.data)
  } catch (error) {
    console.error('获取数据失败：', error)
  }
}

// 弹框
const centerDialogVisible = ref(false)
// 添加编辑列表
const form = ref({
  code: '',
  introduce: '',
  managerId: '',
  name: '',
  pid: ''
})
const add = async () => {
  await instance.post('/company/department', form.value)
  getData()
  centerDialogVisible.value = false
}
// 部门负责人列表
const managerList = ref([])
const gitmanagerList = async () => {
  const res = await instance.get('/sys/user/simple')
  managerList.value = res.data
  console.log(res.data)
}
onMounted(() => {
  getData()
  gitmanagerList()
})
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
